<template>
    <div>
        <el-dialog v-model="showDialog" :title="titleName" width="642px" destroy-on-close center>
            <div class="row">
                <div class="name">
                    <span class="important" style="opacity: -0.9">*</span>
                    上传视频
                </div>
                <div class="upload-box" style="width:100%">
                    <!-- <uploadVideo v-model:file-list="fileList" :limit="1" /> -->
                    <el-upload class="upload-demo" :action="uploadAction" :headers="{ Authorization }"
                        :on-success="fileSuccess" :on-error="fileEerror" :show-file-list="true"
                        :before-upload="fileBeforeUpload" accept="image/jpeg,image/image/png,video/*">
                        <button class="btn-white-blue" style="width:130px;background:#1989FA;color:#fff;">
                            <i class="el-icon el-icon-camera" />选择视频文件
                        </button>
                    </el-upload>
                    <div class="upload-introduce">
                        视频时间10s-60s 视频大小不超50M
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="name">
                    <span class="important">*</span>
                    被派遣单位
                </div>
                <div style="width:100%">
                    <!-- <el-input placeholder="请输入" style="width:240px" @blur="blurConfirmCode" v-model="dispatchUnit"/> -->
                    <el-select v-model="companyId" filterable :disabled="disabled" placeholder="请选择派遣单位">
                        <el-option v-for="item in companyList" :key="item.id" :label="item.serveCompanyName"
                            :value="item.id" />
                    </el-select>
                </div>
            </div>
            <div class="dialog-btn-box">
                <button class="btn-white" @click="showDialog = false" style="marginRight:20px">取消</button>
                <button class="btn" @click="onSubmit" style="marginLength:20px">提交审核</button>
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import global from '@/utils/global'
import {
 applyOccupation,
    getDispatchList,
    cancelDispatchExamine,
    deleteDispatchExamine,
    addDispatch,
    getCompanyList
} from '@/api/long-insure'

export default defineComponent({
    props: {
        show: {
            type: Boolean,
            default: false
        },
        // 申请新工种时传入
        curCompanyId: {
            type: [Number, String]
        },
        id: {
            type: [Number, String]
        },
        // add：添加被派遣单位 apply：申请新工种
        addType: {
            type: String,
            default: 'add'
        }
    },
    data() {
        return {
            showDialog: false,
            isfileLengt: true,
            companyList: [] as any, // 所有单位
            Authorization: 'Bearer' + ' ' + global.token,
            uploadAction: process.env.VUE_APP_BASE_URL + '/rest/period-insur/serve-company/upload',
            fileSize: '',
            fileUrl: [] as any,
            companyId: '' as any,
            disabled: false
        }
    },
    watch: {
        async show(newval) {
            this.showDialog = newval
            if (newval) {
                await this.getCompanyList()
                this.setDefaultCompany()
            }
        },
        showDialog(newval) {
            this.$emit('update:show', newval)
            if (!newval) {
                this.fileUrl = []
                this.fileSize = ''
            }
        }
    },
    computed: {
        titleName() {
            return this.addType === 'apply' ? '申请新工种' : '新增被派遣单位'
        }
    },
    async created() {
        await this.getCompanyList()
    },
    methods: {
        setDefaultCompany() {
            if (this.addType === 'apply') {
                this.companyId = parseInt(this.curCompanyId as string)
                this.disabled = true
            } else {
                this.companyId = ''
                this.disabled = false
            }
        },
        // 获取所有单位列表
        async getCompanyList() {
            const result = await getCompanyList()
            console.log(result, 'result获取所有单位列表')
            this.companyList = result.list
        },
        async fileBeforeUpload(file: any) {
            var url = URL.createObjectURL(file)
            var audioElement = new Audio(url)
            var duration = parseInt(audioElement.duration + '')
            audioElement.addEventListener('loadedmetadata', () => {
                console.log(parseInt(audioElement.duration + ''), '时长为秒，取整')// 时长为秒，取整
                const fileLength = parseInt(audioElement.duration + '')
                if (fileLength < 10 && fileLength > 60) {
                    this.$message.error('视频不可小于10秒或大于60秒')
                    this.isfileLengt = false
                    return
                }
                if ((file.size / 1024 / 1024) > 50) {
                    this.$message.error('视频不可大于50M')
                    this.isfileLengt = false
                }
            })
        },
        fileSuccess(response: { code: number, msg: string, data: { fileSize: string, fileUrl: string } }, file: { raw: { name: string, type: string } }) {
            console.log(file.raw, 'file.raw')
            if (response.code === 500) {
                this.$message.error(response.msg)
                return
            }
            if (file.raw.type !== 'video/mp4') {
                this.$message.error('请上传视频')
                return
            }
            // if (!this.isfileLengt) {
            //     this.$message.error('视频不可小于10秒或大于100秒')
            //     return
            // }
            this.fileSize = response.data.fileSize
            this.fileUrl.push(response.data.fileUrl)
            this.$message.success('上传成功')
        },
        fileEerror() {
            this.$message.error('文件上传失败')
        },
        // 被派遣单位
        async addDispatchUnit() {
            console.log('添加派遣单位')
            console.log(this.companyId, 'companyId')
            if (!this.fileUrl) {
                this.$message.error('请至少上传一个视频')
                return
            }
            const result = await addDispatch({
                serveCompanyId: Number(this.companyId),
                params: {
                    videos: this.fileUrl
                }
            })
            this.showDialog = false
            this.$emit('success')
            this.$message.success('提交被派遣单位成功')
        },
        async onSubmit() {
            if (this.addType === 'apply') {
                // 申请新工种
                if (this.fileUrl.length === 0) {
                    this.$message.error('请至少上传一个视频')
                    return
                }
                const result = await applyOccupation({
                    periodServeCompanyId: Number(this.id),
                    params: {
                        // video: this.fileList[0].fileUrl
                        videos: this.fileUrl
                    }
                })
                this.showDialog = false
                this.$emit('success')
                this.$message.success('申请新工种成功')
            } else {
                // 添加被派遣单位
                this.addDispatchUnit()
            }
            this.$emit('success')
        }
    }
})

</script>
<style lang="stylus" scoped>
.value.important
  color color-red
  font-style italic
.upload-box
  display flex
  align-items flex-end
.upload-introduce
  margin-left 16px
  color #1989FA
.row
  margin-top 32px
  .name
    width 150px
    font-size 16px
    font-weight 500

.upload-box
  display flex
  align-items flex-end
.dialog-btn-box
  display flex
  align-items center
  justify-content center
  margin-top 40px
</style>
